// css vendor
require("../scss/user_home.scss");

// js vendor
require("./components/both/base.js")
import React,{Component, PropTypes} from 'react';

// code
import {Provider} from "react-redux"
import {UserCourseListContainer} from "./containers/user/CourseListContainer.jsx"

// import UserHeader from "./components/user/UserHeader/UserHeader.jsx";
// import UserWayList from "./components/user/UserWayList/UserWayList.jsx";
// import UserFooter from "./components/user/UserFooter/UserFooter.jsx";
import PersonHeader from "./components/user/Personal/PersonalHeader/PersonalHeader.jsx"
import PersonFooter from "./components/user/Personal/PersonFooter/PersonFooter.jsx"

const createStoreWithMiddleware = require("./common/common").createStoreWithMiddleware
import userCourseListApp from "./reducers/user/course_list_reducers"

let store = createStoreWithMiddleware(userCourseListApp)

// data
import userWayListData from "../../mock/userWayList.js"
import userCourseListData from "../../mock/userCourseList"

// userData
var logined,username,avatar
var userData = document.getElementById("userData").innerHTML
if(userData.indexOf("NULL") !== -1){
    logined = false
}else{
    logined = true
    userData = JSON.parse(userData)
    username = userData.username
    avatar = userData.avatar
}


// render header
ReactDOM.render(
    <PersonHeader logined={logined} username={username} avatar={avatar}/>,
    document.getElementById("userHeader")
);

// render body
ReactDOM.render(
    <Provider store={store}>
        <div>
            {/*<UserWayList listData={userWayListData}/>*/}
            <UserCourseListContainer />
        </div>
    </Provider>,
    document.getElementById("contentBody")
);

// render footer
ReactDOM.render(
    <PersonFooter />,
    document.getElementById("userFooter")
);